<template>
	<view>
		<!-- 有数据情况下 呈现数据 -->
		<view class="header-bg" style="background-color: white; width: 750rpx; height: 190rpx;">
			<view class="d-flex j-sb"
				style="position: fixed;z-index: 9000; background-color: #e80909; width: 750rpx; height: 190rpx;">
				<view class="ml-4 mt-12">购物车（{{totalNum}}）</view>
				<view class=" mt-12 mr-4" @click="isEdit">{{isedit?'完成':'编辑'}}</view>
			</view>
		</view>

		<!-- 空白页  没有任何数据情况下显示 -->
		<view class="empty" v-if="totalNum <= 0">
			<image src="/static/img/cate/empty_cart.png" mode="aspectFit"
				style="width: 286upx;height:291upx;margin:0 auto;"></image>
			<view class="" style="color:#a7aaaa;font-size: 28upx;padding-top: 52upx;padding-bottom: 45upx;">
				购物车暂无商品
			</view>
			<view class="empty-go" @tap="goCate">
				<view class="navigator">去逛逛>></view>
			</view>
		</view>

		<!-- 列表部分 -->
		<view class="" v-else>
			<view class="bg" v-for="(item,index) in cartList" :key="index">
				<view class="d-flex">
					<image
						:src="item.checked == true?'/static/img/cate/Selected.png':'/static/img/cate/Notselected.png'"
						mode="widthFix" style="width: 40rpx;height: 40rpx;margin: auto 15upx;"
						@click="check('item', index)" />
					<image :src="item.cover_ico" mode="widthFix" style="width: 133rpx;height: 133rpx;margin: 10rpx;" />
					<view class="flex-column ml-1">
						<view class="title">{{item.product_name}}</view>
						<view class="Sold">{{item.parameter}}</view>
						<view class="price">¥{{item.price}}</view>
					</view>
					<view class="incre d-flex ">
						<image class="jian" src="@/static/img/cate/jian.png" mode="widthFix" style="width: 40rpx;"
							@tap="changeNum(index,-1)"></image>
						<view class="number">{{item.number}}</view>
						<image class="jia" src="@/static/img/cate/jiajia.png" mode="widthFix" style="width: 40rpx;"
							@tap="changeNum(index,1)"></image>
					</view>
				</view>

			</view>


			<view style="height: 130rpx;"></view>

			<!-- 底部固定部分 -->
			<view class="bottom" style="padding: 0 38upx 0 48upx;">
				<view class="d-flex ls2 ">
					<view class="d-flex mt-3" @click="check('all')">
						<image class="jian mt-1"
							:src="allChecked?'/static/img/cate/Selected.png':'/static/img/cate/Notselected.png'"
							mode="widthFix" style="width: 40rpx;  margin-right:20rpx;"></image>
						<view class="mt-1 ml-2">全选</view>
					</view>

					<view class="d-flex flex-1" style="">
						<view v-if="!isedit" class=" mt-4" style="margin-left: 50rpx;">合计：{{total}} </view>
					</view>
					<view class="bottom-btn mt-2" v-if="!isedit" @click="createOrder" hover-class="hover">结算</view>
					<view class="d-flex " v-if="isedit">
						<!-- <view class="isAll1">移入收藏夹</view> -->
						<view class="bottom-btn mt-2" @click="clearCart">删除</view>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				totalNum: 0, //购物车总条数
				total: 0.00,
				allchecked: false,
				checked: false,
				isedit: false,
				cartList: [],
				dataObj: {}
			}
		},
		onLoad() {

			if (this.hasLogin) {
				let dataObj = {
					token: uni.getStorageSync('token')
				}
				this.dataObj = dataObj
				this.loadData();
			}

			uni.$on('changeCartList', () => {
				this.loadData()
			});
		},
		onPullDownRefresh() {
			this.loadData();

		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData() {

				let res = await this.$myRequest({
					url: '/cartList',
					data: this.dataObj,
					methods: 'POST'
				})

				if (res.data.status == 1) {
					this.totalNum = res.data.data.length;
					let cartList = res.data.data.map(item => {
						item.checked = false;
						return item;
					});

					this.cartList = cartList;
					this.calcTotal(); //计算总价
				}
				uni.stopPullDownRefresh()
			},

			//选中状态处理
			check(type, index) {
				if (type === 'item') {
					this.cartList[index].checked = !this.cartList[index].checked;
				} else {
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item => {
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.calcTotal();
			},

			//计算总价
			calcTotal() {
				let list = this.cartList;
				if (list.length === 0) {
					this.total = 0.00;
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item => {
					if (item.checked === true) {
						total += item.price * item.number;
					} else if (checked === true) {
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},

			order() {
				uni.navigateTo({
					url: './order'
				})
			},
			allChecked() {
				this.allchecked = !this.allchecked
			},
			selectItem() {
				this.checked = !this.checked
			},
			isEdit() {
				this.isedit = !this.isedit
			},
			changeNum(index, num) {
				let onumber = this.cartList[index].number;
				let nnumber = parseInt(onumber) + parseInt(num);

				if (nnumber < 1) {
					nnumber = 1
				} else if (nnumber > 999) {
					nnumber = 999
				}

				this.cartList[index].number = nnumber;

				this.calcTotal();
			},
			// 
			async getcartList() {
				let cartList = await this.$myRequest({
					url: '/cartList',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token')
					}
				})
				if (cartList.status == 1) {
					this.list = this.cartList.data
				}
			},

			goCate() {
				uni.switchTab({
					url: '/pages/cate/cate'
				})
			},

			//确定清空购物车
			async clearCart() {
				let list = this.cartList;
				let delData = [];
				list.forEach(item => {
					if (item.checked) {
						delData.push(item.id)
					}
				})

				let delDataStr = JSON.stringify(delData)
				let res = await this.$myRequest({
					url: '/clearCart',
					data: {
						token: uni.getStorageSync('token'),
						ids: delDataStr
					},
					methods: 'POST'
				})
				this.isEdit()
				this.$api.msg(res.data.msg)
				this.loadData()
			},

			//创建订单
			async createOrder() {
				let list = this.cartList;
				let goodsData = [];
				list.forEach(item => {
					if (item.checked) {
						goodsData.push({
							// attr_val: item.attr_val,
							parameter_id: item.parameter_id,
							number: item.number
						})
					}
				})

				this.dataObj.data = JSON.stringify(goodsData)
				let res = await this.$myRequest({
					url: '/order',
					data: this.dataObj,
					methods: 'POST'
				})

				this.$api.msg('去创建订单');

				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/cart/order?tag=' + res.data.data
					})
				}, 1000)
			}
		}

	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.hover {
		opacity: 0.6;
	}

	.bottom-btn {
		color: white;
		background-color: #e80909;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
		// padding: 10rpx;
	}

	.header-bg {
		color: white;
	}

	.bottom {
		background-color: white;
		height: 110rpx;
		border-top: 1rpx solid #eaeaea;
		position: fixed;
		/* #ifdef APP */
		bottom: 0upx;
		/* #endif */

		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */


		width: 90%;
		// z-index: 1000;
	}

	.bg {
		background-color: white;
		width: 710rpx;
		height: 100%;
		margin: 20rpx auto;
		border-radius: 20rpx;

		.bk {}

		.title {
			width: 300rpx;
			margin-top: 20rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 28rpx;
		}

		.Sold {
			margin: 10rpx 0;
			color: #999;
			font-size: 24rpx;
		}

		.price {
			color: #e80909;
			font-size: 28rpx;
		}

		.incre {
			margin-top: 120rpx;
			// margin-right: 25rpx;
			height: 60rpx;

			.number {
				margin: 0 25rpx;
			}

		}
	}

	.ls2 {
		.center {
			margin: 350rpx 0 30rpx 260rpx;
		}

		.btn {
			color: white;
			background-color: #e80909;
			margin: 0rpx auto;
			width: 320rpx;
			border-radius: 50rpx;
		}
	}


	.isAll {
		width: 100rpx;
		height: 100%;
		// background-image: linear-gradient(90deg, rgba(237, 201, 125, 1.0) 200rpx, rgba(198, 8, 8, 1.0)100rpx);
		background-color: #e80909;
		color: white;
		// 
		margin: 10rpx 0;
		// margin-left: 180rpx;
	}

	// .isAll1,
	// .isAll2 {
	// 	width: 200rpx;
	// 	// padding: 20rpx;
	// 	height: 90rpx;
	// 	text-align: center;
	// 	line-height: 90rpx;
	// }

	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-go {
			width: 297upx;
			height: 84upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 42upx;
			font-size: 30upx;
			background-color: #f3461e;
			color: #fff;
			letter-spacing: 2upx;
		}
	}
</style>
